<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>OSSJK 2.0</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<style>
.detailTable_text {
	font-weight: bold;
}
</style>
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form">
		<!-- 基本信息模块 -->
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>基础信息</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0">
			<colgroup>
				<col width="15%">
				<col width="30%">
				<col width="15%">
				<col width="30%">
			</colgroup>

			<tbody class="detailTable">
				<tr>
					<td class="detailTable_text">登录名称</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32" placeholder="请输入用户名" name="name" id="name"></td>
					<td class="detailTable_text">真实名称</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32" placeholder="请输入真实姓名" name="rname"></td>
				</tr>
				<tr>
					<td class="detailTable_text">性别</td>
					<td>
						<div>
							<select name="sex" lay-verify="required">
								<option value="">请选择性别</option>
								<option value="1">男</option>
								<option value="2">女</option>
							</select>
						</div>
					</td>
					<td class="detailTable_text">联系电话</td>
					<td><input type="text" class="layui-input " lay-verify="required/number|size" maxsize="13" placeholder="请输入电话号码" name="mobile"></td>
				</tr>
				<tr>
					<td class="detailTable_text">省市级</td>
					<td colspan="3"><div class="layui-form-item">
							<div id="area"></div>
						</div></td>
				</tr>
				<tr>
					<td class="detailTable_text">家庭住址</td>
					<td colspan="3"><input type="text" class="layui-input " lay-verify="required|size" maxsize="200" placeholder="请输入住址" name="address"></td>
				</tr>
				<tr>
					<td class="detailTable_text">email</td>
					<td><input type="text" class="layui-input " lay-verify="required/email|size" maxsize="200" placeholder="请输入email" name="email"></td>
					<td class="detailTable_text">生日</td>
					<td><input type="text" name="birth" id="birth" lay-verify="required" autocomplete="off" class="layui-input"></td>
				</tr>
				<tr>
					<td class="detailTable_text">民族</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32" placeholder="请输入民族" name="nations"></td>
					<td class="detailTable_text">籍贯</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32"  placeholder="请输入籍贯" name="natives"></td>
				</tr>
				<tr>
					<td class="detailTable_text">学历</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32" placeholder="请输入学历" name="education"></td>
					<td class="detailTable_text">毕业学院</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="100"  placeholder="请输入毕业学院" name="school"></td>
				</tr>
				<tr>
					<td class="detailTable_text">专业</td>
					<td><input type="text" class="layui-input " lay-verify="required|size" maxsize="32"  placeholder="请输入专业" name="major"></td>
					<td class="detailTable_text">入职时间</td>
					<td><input type="text" name="entry" id="entry" lay-verify="required" autocomplete="off" class="layui-input">
				</tr>
			</tbody>
		</table>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>紧急联系人</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0">
			<thead>
				<tr>
					<th></th>
					<th>联系人姓名</th>
					<th>联系人关系</th>
					<th>联系人电话</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="5">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="contacts-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<div>银行卡信息</div>
			</legend>
		</fieldset>
		<table class="layui-table mag0">
			<thead>
				<tr>
					<th></th>
					<th>银行卡号</th>
					<th>银行卡开户行</th>
					<th>主卡</th>
					<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="5">
						<div style="text-align: center">
							<a class="layui-btn layui-btn-xs" id="bankcard-add">添加</a>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="magt10 layui-right">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/js/index.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/constant.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '../../../static/plugin/layui_extends/'
		}).extend({
			selectN : 'selectN'
		}).use([ 'selectN', 'form', 'laydate', 'layer' ], function() {
			var form = layui.form;
			var laydate = layui.laydate;
			var selectN = layui.selectN;
			var layer = parent.layer === undefined ? layui.layer : top.layer, $ = layui.jquery;
			var toUpdateDetailApi = "../../../system/employee/toUpdateDetail";
			var insertApi = "../../../system/employee/updateDetail";
			var getAreaApi = "../../../getArea";
			var insertMethod = "post";
			var url = insertApi;
			var method = insertMethod;
			var areaData;
			//初始化日期
			laydate.render({
				elem : '#birth'
			});
			//初始化日期
			laydate.render({
				elem : '#entry'
			});

			//添加紧急联系人
			$("#contacts-add").click(function() {
				$("#contacts-add").parent().parent().parent().before(contactsHtml());
				setText();
				form.render(); // 更新全部
				//显示删除按钮
				$(".contacts").find(".deleteitem-btn").show();
			});
			//添加银行卡
			$("#bankcard-add").click(function() {
				$("#bankcard-add").parent().parent().parent().before(bankcardHtml());
				setText();
				form.render(); // 更新全部
				//显示删除按钮
				$(".bankcard").find(".deleteitem-btn").show();
			});
			//拼接紧急联系人字段
			function contactsHtml(index, obj) {
				if (!obj) {
					obj = {
						name : '',
						phone : '',
						relationship : ''
					}
				}
				if (!index) {
					index = 1;
				}
				var str = null;
				str += '<tr class="contacts">                                                                                                   ';
				str += '	<td class="detailTable_text contacts-text">紧急联系人' + index + '</td>                                                                               ';
				str += '	<td><input type="text" class="layui-input "  lay-verify="required|size" maxsize="32"  placeholder="请输入联系人姓名" name="cname" class="cname" value="'+obj.name+'"></td>         ';
				str += '	<td>                                                                                                                                      ';
				str += '		<div>                                                                                                                                 ';
				str += '			<select name="crelationship" class="crelationship" lay-verify="required">                                                         ';
				str += '				<option value="">请选择联系人关系</option>                                                                                    ';
				str += '				<option value="1" ' + (obj.relationship == 1 ? 'selected' : '') + '>父子</option>                                                                                               ';
				str += '				<option value="2" ' + (obj.relationship == 2 ? 'selected' : '') + '>母子</option>                                                                                               ';
				str += '				<option value="3" ' + (obj.relationship == 3 ? 'selected' : '') + '>兄弟</option>                                                                                               ';
				str += '				<option value="4" ' + (obj.relationship == 4 ? 'selected' : '') + '>姐弟</option>                                                                                               ';
				str += '				<option value="5" ' + (obj.relationship == 5 ? 'selected' : '') + '>兄妹</option>                                                                                               ';
				str += '				<option value="6" ' + (obj.relationship == 6 ? 'selected' : '') + '>姐妹</option>                                                                                               ';
				str += '				<option value="7" ' + (obj.relationship == 7 ? 'selected' : '') + '>亲戚</option>                                                                                               ';
				str += '				<option value="8" ' + (obj.relationship == 8 ? 'selected' : '') + '>朋友</option>                                                                                               ';
				str += '				<option value="9" ' + (obj.relationship == 9 ? 'selected' : '') + '>其他</option>                                                                                               ';
				str += '			</select>                                                                                                                         ';
				str += '		</div>                                                                                                                                ';
				str += '	</td>                                                                                                                                     ';
				str += '	<td><input type="text" class="layui-input " lay-verify="required/number|size" maxsize="13"placeholder="请输入联系人电话" name="cphone" class="cphone" value="'+obj.phone+'" ></td>';
				str += '	<td><a class="layui-btn layui-btn-xs layui-btn-danger deleteitem-btn">删除</a></td>';
				str += '</tr>                                                                                                                                       ';
				return str;
			}
			//拼接银行卡信息字段
			function bankcardHtml(index, obj) {
				if (!obj) {
					obj = {
						card : '',
						bank : '',
						main : $(".bankcard").length == 0 ? 1 : 2
					}
				}
				if (!index) {
					index = 1;
				}
				var str = null;
				str += '		<tr class="bankcard">                                                                                                    ';
				str += '			<td class="detailTable_text bankcard-text">银行卡' + index + '</td>                                                              ';
				str += '			<td><input type="text" class="layui-input "  lay-verify="required|size" maxsize="32"  placeholder="请输入卡号" name="bcard" class="bcard" value="'+obj.card+'"></td>               ';
				str += '			<td><input type="text" class="layui-input "  lay-verify="required|size" maxsize="50"  placeholder="请输入银行卡开户行" name="bbank" class="bbank" value="'+obj.bank+'"></td>       ';
				str += '			<td>                                                                                                                 ';
				str += '				<input type="radio" name="bmainval" class="bmainval" title=""' + (obj.main == 1 ? 'checked' : '') + '>				                                      ';
				str += '				<input type="hidden" name="bmain" class="bmain" value="1" >				                                      ';
				str += '			</td>                                                                                                                ';
				str += '			<td><a class="layui-btn layui-btn-xs layui-btn-danger deleteitem-btn">删除</a></td>';
				str += '		</tr>                                                                                                                    ';
				return str;
			}
			//删除按钮
			$("tbody").on("click", ".deleteitem-btn", function() {
				$(this).parent().parent().remove();
				if ($(".contacts").length <= 1) {
					$(".contacts").find(".deleteitem-btn").hide();
				}
				if ($(".bankcard").length <= 1) {
					$(".bankcard").find(".deleteitem-btn").hide();
					//如果删除后没有主卡，默认设置第一张为主卡
					for (var i = 0; i < $(".bmainval").length; i++) {
						if ($('input:radio[name="bmainval"]:checked').val() == null) {
							$("input[name=bmainval]:eq(0)").attr("checked", 'checked');
						}
					}
				}
				setText();
				form.render();
			});
			function setText() {
				for (var i = 1; i <= $(".bankcard").length; i++) {
					$(".contacts-text").eq(i - 1).text("紧急联系人" + i);
				}
				for (var i = 1; i <= $(".bankcard").length; i++) {
					$(".bankcard-text").eq(i - 1).text("银行卡" + i);
				}
			}
			function radioSetValue() {
				for (var i = 0; i < $(".bmainval").length; i++) {
					$(".bmain").eq(i).attr("value", "2");

				}
				for (var i = 0; i < $(".bmainval").length; i++) {
					if ($(".bmainval").eq(i).is(':checked')) {
						$(".bmain").eq(i).attr("value", "1");
					}
				}

			}
			function postHtml(index, post) {
				str += '<option value="'+index+'">' + post + '</option>';
				return str;
			}
			//回显表单
			var id = getUrlParam("id");
			var type = getUrlParam("type");
			$("#form").append("<input type='hidden' name='id' value="+id+">");

			loadAjax( toUpdateDetailApi + "/" + id, "get", null, function(response) {
				baseCallBack(response, function(response) {
					fomrVal(form, "formTest", response.data.employee);
					var length = 0;
					for ( var i in response.data.contacts) {
						length++;
						$("#contacts-add").parent().parent().parent().before(contactsHtml(parseInt(i) + 1, response.data.contacts[i]));
					}
					if (length == 0) {
						$("#contacts-add").parent().parent().parent().before(contactsHtml());
					}
					if (length <= 1) {//隐藏删除按钮
						$(".contacts").find(".deleteitem-btn").hide();
					}
					length = 0;
					for ( var i in response.data.bankcard) {
						length++;
						$("#bankcard-add").parent().parent().parent().before(bankcardHtml(parseInt(i) + 1, response.data.bankcard[i]));

					}
					if (length == 0) {
						$("#bankcard-add").parent().parent().parent().before(bankcardHtml());
					}
					if (length <= 1) {//隐藏删除按钮
						$(".bankcard").find(".deleteitem-btn").hide();
					}
					for ( var i in response.data.post) {
						$("#post").append(postHtml(i, post[i]));
					}
					//省市区联动
					loadAjax( getAreaApi, "get", null, function(response2) {
						baseCallBack(response2, function(response2) {
							areaData = response2.data;
							//无限级分类-所有配置
							selectN({
								//元素容器【必填】
								elem : '#area',
								data : areaData, //候选数据【必填】
								width : null,//设置了长度
								selected : response.data.areaIds,//默认值
								last : false, //为真只取最后一个值
								tips : '请选择', //空值项提示，可设置为数组['请选择省','请选择市','请选择县']
								name : 'areaIds',//input的name 不设置与选择器相同(去#.)
								delimiter : ',',//数据分隔符
								field : {//数据的键名
									idName : 'id',
									titleName : 'name',
									childName : 'children'
								}
							});
						});
					});
					form.render();
					//如果type=1，则是查看员工详细，将所有按钮隐藏，所有文本不可编辑
					if (type == 1) {
						$("input").attr("disabled", true);
						$("textarea").attr("disabled", true);
						$("select").attr("disabled", true);
						$("a").css("display", "none");
						$("button").css("display", "none");
					} else {
						$("#name").attr("disabled", true);
					}
					form.render();

				});
			});

			//提交表单
			form.on("submit(submit)", function(data) {
				//更新单选框value值
				radioSetValue();

				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		});
	</script>
</body>
</html>